<template>
	<view>
		<u-navbar :is-back="false" title="　" :border-bottom="false">
			<view class="u-flex u-row-right" style="width: 100%">
				<view class="camera u-flex u-row-center" @click="switchLang"><u-icon :name="lang" color="warning" size="48"></u-icon></view>
			</view>
		</u-navbar>
		<view class="u-flex user-box u-p-l-30 u-p-r-20 u-p-b-30">
			<view class="u-m-r-10"><u-avatar :src="logo" size="120"></u-avatar></view>
			<view class="u-flex-1"><view class="u-font-18 margin-left">jomo-uniapp</view></view>
			<view class="u-m-l-10 u-p-10"><u-icon name="grid" color="#969799" size="28"></u-icon></view>
			<view class="u-m-l-10 u-p-10"><u-icon name="arrow-right" color="#969799" size="28"></u-icon></view>
		</view>

		<view class="u-m-t-20">
			<u-cell-group><u-cell-item icon="edit-pen-fill text-red" :title="$t('usercenter.userinfor')" @click="routerTo('userinfor')"></u-cell-item></u-cell-group>
		</view>

		<view class="u-m-t-20">
			<u-cell-group>
				<u-cell-item icon="error-circle-fill text-blue" :title="$t('usercenter.about')" @click="routerTo('about')"></u-cell-item>
				<u-cell-item icon="file-text-fill text-green" :title="$t('usercenter.updatelog')" @click="routerTo('updatelog')"></u-cell-item>
				<u-cell-item icon="android-fill text-red" :title="$t('usercenter.testlist')" @click="routerTo('testList')"></u-cell-item>
			</u-cell-group>
		</view>

		<view class="u-m-t-20">
			<u-cell-group><u-cell-item icon="setting-fill text-orange" :title="$t('usercenter.setting')" @click="routerTo('setting')"></u-cell-item></u-cell-group>
		</view>
	</view>
</template>

<script>
export default {
	computed: {
		lang() {
			return this.$i18n.locale == 'en' ? 'en' : 'zh';
		}
	},
	data() {
		return {
			logo: '/static/logo/logo.png'
		};
	},
	onLoad() {},
	methods: {
		routerTo(name) {
			console.log('name==', name);
			console.log('this.$Router.push==', this.$Router.push);
			this.$Router.push({ name: name });
		},
		switchLang() {
			this.$i18n.locale = this.$i18n.locale == 'en' ? 'zh-Hans' : 'en';
			console.log('this.$i18n.locale==', this.$i18n.locale);
			if (this.$u.os() == 'android') {
				uni.showModal({
					content: this.$t('tabbar.component'),
					success: res => {
						if (res.confirm) {
							uni.setLocale(this.$i18n.locale);
						}
					}
				});
			} else {
				uni.setLocale(this.$i18n.locale);
			}
			uni.setNavigationBarTitle({
				title: this.$t('tabbar.component')
			});
		}
	}
};
</script>

<style lang="scss">
page {
	background-color: #ededed;
}

.camera {
	width: 54px;
	height: 44px;

	&:active {
		background-color: #ededed;
	}
}
.user-box {
	background-color: #fff;
}
</style>
